<template>
  <el-dialog
    append-to-body
    :visible.sync="visible"
    title="不受理说明"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <div class="d-flex align-items-center mb-3">
      <div style="width: 100px">状态：</div>
      <div>
        <span v-if="viewModel">{{ enumApprovalStatus[relateData.is_approval] }}</span>
        <c-select
          v-else
          v-model="putData.is_approval"
          class="form-control-ml"
          :options="enumApprovalStatus"
          @change="setDes"
          placeholder="请选择状态"
        ></c-select>
      </div>
    </div>
    <div class="d-flex align-items-center">
      <div style="width: 100px">说明内容：</div>
      <div class="form-control-ml">
        <span v-if="viewModel">{{ relateData.pre_approval_des }}</span>
        <el-input
          v-else
          v-model="putData.pre_approval_des"
          rows="5"
          placeholder="输入说明内容"
          type="textarea"
        ></el-input>
      </div>
    </div>
    <div class="text-center mt-3" v-if="!viewModel">
      <el-button @click="handleReject" type="primary" :loading="submitLoading" class="btn-long">
        完成
      </el-button>
      <el-button @click="beforeClose" class="btn-long">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    relateData: {
      type: Object,
      default: () => {},
    },
    viewModel: Boolean,
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      putData: {},
      submitLoading: false,
      enumApprovalStatus: {
        '-1': '延时受理',
        2: '受理拒绝',
      },
    }
  },
  computed: {
    user() {
      return this.$store.getters.user
    },
  },
  watch: {},
  mounted() {},
  created() {},
  methods: {
    beforeClose() {
      this.putData = {}
      this.$emit('update:visible', false)
    },
    setDes() {
      if (+this.putData.is_approval === -1) {
        this.putData.pre_approval_des = `暂无时间处理，请稍后， 如有需求请联系：联系人：${this.user.corpName}, 联系电话${this.user.phoneNumber}`
      }
      if (+this.putData.is_approval === 2) {
        this.putData.pre_approval_des = `项目不符合要求：联系人：${this.user.corpName}, 联系电话${this.user.phoneNumber}`
      }
    },
    handleReject() {
      if (!this.putData.is_approval) {
        return this.$message.warning('请选择受理状态')
      }
      this.$api
        .updateData(this.$serviceName, 'customer_related', this.queryId, {
          pre_approval_person: this.user.userId,
          approved_date: this.$utils.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          pre_approval_des: this.putData.pre_approval_des,
          is_approval: this.putData.is_approval,
        })
        .then(() => {
          this.$emit('success', true)
          this.$message.success('受理成功')
          this.beforeClose()
        })
        .catch(() => {
          this.$message.error('项目受理失败')
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
